// 学校列表
<!-- 学校管理 -->

<!-- 项目管理 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label mb10">学校管理</p>
    <!-- sonRouter="yybureauFormationBJ" 为跳转新的页面编辑 -->
    <dxtable
      :dataJson="dataJson"
      :portUrl="portUrl"
      :formJson="formJson"
      :qx="qx"
      ref="databale"
      :czFun="czFun"
      :isshowSc="false"
      :isshowXz="false"
      czWidth="300"
    ></dxtable>
  </div>
  <n-modal v-model:show="showModalkec" preset="card" class="xzczxsdfret">
    <template #header>
      <div>课程列表</div>
    </template>
    <div>
      <n-tabs type="line" animated>
        <n-tab-pane name="校内课程" tab="校内课程">
          <xnglkecheng :xxid="xxid"></xnglkecheng
        ></n-tab-pane>
        <n-tab-pane name="校外课程" tab="校外课程">
          <kecheng :xxid="xxid"></kecheng
        ></n-tab-pane>
      </n-tabs>
    </div>
    <template #action>
      <div class="tr">
        <n-button @click="showModalkec = false"> 关闭 </n-button>
      </div>
    </template>
  </n-modal>

  <n-modal v-model:show="showModal" preset="card" class="xzczxsdfret">
    <template #header>
      <div>学生列表</div>
    </template>
    <div>
      <xsgl :xxid="xxid"></xsgl>
    </div>
    <template #action>
      <div class="tr">
        <n-button @click="showModal = false"> 关闭 </n-button>
      </div>
    </template>
  </n-modal>
  <n-modal v-model:show="showModalzd" preset="card" class="xzczxsdfret">
    <template #header>
      <div>账单列表</div>
    </template>
    <div>
      <bill :xxid="xxid"></bill>
    </div>
    <template #action>
      <div class="tr">
        <n-button @click="showModalzd = false"> 关闭 </n-button>
      </div>
    </template>
  </n-modal>
</template>
<script lang="ts" setup>
import dxtable from "../../../components/util/dxtable.vue";
import sort from "../../../components/util/sort.vue";
import { dxget, dxpost } from "../../../util/index";
import { NButton, NImage, NTag } from "naive-ui";
import { h, ref, reactive } from "vue";
import xsgl from "../xuexiao/xsgl.vue";
import xnglkecheng from "../xuexiao/xnglkecheng.vue";
import kecheng from "../xuexiao/kecheng.vue";
import bill from "../xuexiao/bill.vue";
const showModalzd = ref(false);
const xmlxSelect = ref();
const xxid = ref();
const showModalkec = ref();
const showModal = ref();
const databale = ref();
const initeer = () => {
  databale.value.initDataExpose();
};
let dataJson = [
  {
    title: "id",
    key: "id",
    width: 40,
  },
  {
    title: "学校名称",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "title",
    width: "",
    search: true,
    istable: true,
    required: false,
  },
  {
    title: "区域",
    type: "select",
    icon: "dx-biaodanzujian-xialakuang",
    search: false,
    key: "qyId",
    options: [],
    render: (row) => {
      try {
        return xmlxSelect.value.filter((a) => a.value == row.qyId)[0].label;
      } catch (e) {}
    },
  },
  {
    title: "负责人姓名",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "name",
    width: "",
    search: true,
    istable: true,
    required: false,
  },
  {
    title: "负责人电话",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "phone",
    width: "",
    search: true,
    istable: true,
    required: false,
  },

  {
    title: "排序",
    width: 100,
    render: (row) => {
      row.sjk = "courseManagement"; //数据库
      row.databaseName = "schoolManagement"; //表名
      return h(sort, {
        row,
        onCallBack: () => {
          initeer();
        },
      });
    },
  },
  {
    title: "添加时间",
    key: "addTime",
    width: 150,
  },
];

const qx = {
  DeletePermissionID: "23456", //删除
  EditPermissionIdentifier: "23456", // 编辑
  NewPermissionIdentifier: "cschoolManagementxz", // 新建
  ViewPermissionID: "cschoolManagementck", // 查看
};
const portUrl = "courseManagement/schoolManagement?qyId=" + localStorage.qyId;

let formJson = reactive([
  {
    title: "学校名称",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "title",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "区域",
    type: "select",
    icon: "dx-biaodanzujian-xialakuang",
    options: [],
    val: "1",
    span: 12,
    key: "qyId",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "负责人姓名",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "name",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "负责人电话",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "phone",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "登录密码",
    type: "input",
    val: "123456",
    icon: "dx-shurukuang",
    span: 12,
    key: "paw",
    width: "",
    search: false,
    istable: true,
    required: true,
  },

  {
    title: "封面",
    type: "img",
    val: "",
    icon: "dx-img",
    span: 12,
    key: "cover",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
]);
const czFun = {
  fun: (row) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModalkec.value = true;
            xxid.value = row.id;
          },
        },
        "课程列表"
      ),
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModal.value = true;
            xxid.value = row.id;
          },
        },
        "学生列表"
      ),
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModalzd.value = true;
            xxid.value = row.id;
          },
        },
        "账单列表"
      ),
    ];
  },
};

// 获取字典内容
const xtgxxmfl = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd", { name: "dzkhqy" });
  dataJson[2].options = [
    {
      label: "全部",
      value: "",
    },
    ...data,
  ];
  formJson[1].options = data;
  xmlxSelect.value = data;
  console.log(data);
};
xtgxxmfl();
</script>
<style scoped></style>
